<template>
  <v-spin :spinning="spinLoading" :tip="textLoading">
    <div class="current-content">
      <div class="middle-content">
        <splitpanes :border="splitpanesBorder">
          <pane key="1" :width="300">
            <v-directory-tree multiple default-expand-all>
              <v-tree-node key="0-0" title="parent 0">
                <v-tree-node key="0-0-0" title="leaf 0-0" is-leaf></v-tree-node>
                <v-tree-node key="0-0-1" title="leaf 0-1" is-leaf></v-tree-node>
              </v-tree-node>
              <v-tree-node key="0-1" title="parent 1">
                <v-tree-node key="0-1-0" title="leaf 1-0" is-leaf></v-tree-node>
                <v-tree-node key="0-1-1" title="leaf 1-1" is-leaf></v-tree-node>
              </v-tree-node>
            </v-directory-tree>
          </pane>
          <pane key="2">
            <splitpanes horizontal style="height: 700px">
              <pane key="3">
                <div class="p-10">
                  <v-form-model ref="ruleForm" layout="inline">
                    <v-form-model-item label="内容">
                      <v-input placeholder="input placeholder"></v-input>
                    </v-form-model-item>
                    <v-form-model-item label="状态">
                      <v-select
                        placeholder="select placeholder"
                        style="width: 180px"
                      >
                        <v-select-option value="jack">Jack</v-select-option>
                        <v-select-option value="lucy">Lucy</v-select-option>
                        <v-select-option value="Yiminghe"
                          >yiminghe</v-select-option
                        >
                      </v-select>
                      <v-form-model-item class="ml-10">
                        <v-button type="primary" class="mr-10">查询</v-button>
                        <v-button class="mr-10">重置</v-button>
                      </v-form-model-item>
                    </v-form-model-item>
                  </v-form-model>
                </div>
                <div class="plr-10 pb-10">
                  <vcu-table :data="tableData">
                    <vcu-table-column type="seq" width="60"></vcu-table-column>
                    <vcu-table-column
                      field="name"
                      title="Name"
                    ></vcu-table-column>
                    <vcu-table-column
                      field="sex"
                      title="Sex"
                    ></vcu-table-column>
                    <vcu-table-column
                      field="age"
                      title="Age"
                    ></vcu-table-column>
                    <template v-slot:pagination>
                      <v-pagination
                        size="small"
                        v-model="pagination.current"
                        :total="pagination.total"
                        :defaultPageSize="pagination.pageSize"
                        :showSizeChanger="pagination.showSizeChanger"
                        :pageSizeOptions="pagination.pageSizeOptions"
                        :showQuickJumper="pagination.showQuickJumper"
                      />
                    </template>
                  </vcu-table>
                </div>
              </pane>
              <pane key="4">
                <vcu-chart-bar :data="chartData" />
              </pane>
            </splitpanes>
          </pane>
        </splitpanes>
      </div>
    </div>
  </v-spin>
</template>

<script>
export default {
  name: "template4",
  components: {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  data() {
    return {
      textLoading: "",
      loadingTextObj: {
        loading: "页面初始化中...",
        updata: "数据提交中...",
      },
      spinLoading: true,
      splitpanesBorder: {
        left: false,
        right: false,
        top: false,
        bottom: false,
      },
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "好好学习天天向上",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women ",
          age: 24,
          address: "Shanghai",
        },
      ],
      pagination: {
        current: 1,
        total: 100,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showSizeChanger: true,
        showQuickJumper: true,
      },
      chartData: {
        dimensions: {
          name: "week",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        measures: [
          {
            name: "PV",
            data: [256, 767, 1356, 2087, 803, 582, 432],
          },
          {
            name: "UV",
            data: [287, 707, 1756, 1822, 987, 432, 322],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    //初始化
    this.init();
  },
  methods: {
    openLoading(text) {
      this.textLoading = text;
      this.spinLoading = true;
    },
    init() {
      this.openLoading(this.loadingTextObj.loading);

      setTimeout(() => {
        this.spinLoading = false;
      }, 1000);
    },
  },
  activated() {},
  deactivated() {},
};
</script>

<style lang="less" scoped>
</style>